<template>
  <div>
    <div id="title" @click="$router.push({path: '/editUserInfo'})">
      <img v-if="profile.head_img" class="icon" :src="'http://127.0.0.1:3000'+profile.head_img" alt="">
      <img v-else src="../../assets/img/u80.png" class="icon" alt="">
      <div id="title-center">
        <div id="center-top">
          <i v-if="profile.gender == 1" class="iconfont iconxingbienan gender"></i>
          <i v-else class="iconfont iconxingbienv gender"></i>
          <span class="username">{{ profile.nickname }}</span>
        </div>
        <i>2019-10-10</i>
      </div>
      <img class="edit" src="@/assets/img/u227.png" alt="">
    </div>
    <div id="content">
      <ceil-bar @gotoPage="goPage" v-for="(item, index) in listStr" :key="index" :label="item.label" :desc="item.desc"></ceil-bar>
    </div>
    <auth-btn @sendClick="logout" class="logout-btn" text="退 出"></auth-btn>
  </div>
</template>

<script>
import { Dialog } from 'vant'
import userApi from '@/api/user'
import ceilBar from '@/commonComponent/ceilBar.vue'
import authBtn from '@/commonComponent/authButton.vue'

export default {
  data() {
    return {
      id: localStorage.getItem('user_id'),
      listStr: [
        { label: "我的关注", desc: '关注的用户' },
        { label: "我的跟帖", desc: '跟帖/回复' },
        { label: "我的收藏", desc: '文章/视频' },
        { label: "设置", desc: '' }
      ],
      profile: {}
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    getUserInfo() {
      console.log(this.id);
      userApi.getUserInfo(this.id).then(res => {
        let resp = res.data
        this.profile = resp.data
        console.log(this.profile);
      })
    },
    goPage(label) {
      console.log('跳转到', label);
      switch (label) {
        case '我的关注':
          this.$router.push('/myfollow')
          break;
        case '我的跟帖':
          this.$router.push('/mycomment')
          break;
        case '我的收藏':
          this.$router.push('/mycollection')
          break;
        case '设置':
          console.log('等待开发中');
          break;
        default:
          break;
      }
    },
    logout() {
      Dialog.confirm({
        message: '你确定要退出吗?'
      }).then(() => {
        localStorage.removeItem('token')
        localStorage.removeItem('user_id')
        this.$router.replace({
          path: '/login'
        })
      }).catch(() => {
        return false
      })
    },
  },
  components: {
    ceilBar,
    authBtn
  }
}
</script>

<style scoped>
#title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8vw;
  margin-bottom: 8vw;
}

#title .icon {
  display: flex;
  width: 22vw;
  height: 20vw;
  margin-left: 6vw;
  border-radius: 50%;
}

#title-center {
  position: absolute;
  display: flex;
  flex-direction: column;
  left: 34vw;
}

#center-top .gender {
  color: #78b2dc;
  /* width: 6vw; */
  font-size: 4.5vw;
}

#title-center i {
  margin-top: 2vw;
  color: #a1abc3;
}

.edit {
  width: 5vw;
  margin-right: 3vw;
  vertical-align: middle;
  margin-top: -0.5vw;
  margin-left: 2vw;
}

#content {
  display: flex;
  border-top: 1vw solid #e4e4e4;
  box-sizing: border-box;
  /* padding-left: 5vw; */
  flex-direction: column;
}

.logout-btn {
  margin: 0 6vw;
}
</style>
